<template>
  <tbc-dialog ref="dialog" :title="(form.cat_id ? '编辑':'新增') + '分类'" @confirm="formSubmit">
    <tbc-dynamic-form :form="dynamicForm" class="compact">
      <template #cat_path="scope">
        <tbc-selector api="/goods.category/async" checkStrictly
                      v-model="scope.item.value" style="width: 100%">
        </tbc-selector>
      </template>
      <template #cat_name="scope">
        <el-row :gutter="20">
          <el-col :span="15">
            <el-form-item label="名称">
              <el-input label="名称" v-model="scope.item.value"/>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="短名称">
              <el-input v-model="form.short_name"/>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template #icon="scope">
        <tbc-thumbnail v-model="scope.item.value" width="80px" height="80px" @upload="$refs.file.show({max: 1})"/>
      </template>
    </tbc-dynamic-form>
  </tbc-dialog>
  <tbc-file-manager ref="file" @select="onFileSelected"/>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, Ref, toRefs} from 'vue'
import useGoodsCategory from './api/goodsCategory'

export default defineComponent({

  name: 'goods-cat-form',

  emits: ['success'],

  setup(prop, {emit}) {
    const category = useGoodsCategory()
    const dialog: Ref = ref(null)
    const state = reactive({
      form: {cat_id: '', short_name: '', status: 1, sort_weight: 50},
      dynamicForm: [],
      dynamicBase: [
        {
          label: '上级分类', value: [], type: 'selector', field: 'cat_path',
          default: []
        },
        {label: '', value: '', type: 'input', field: 'cat_name'},
        {
          label: '图标', value: '', type: 'input', field: 'icon'
        },
        {
          label: '排序', value: 50, type: 'input-number',
          field: 'sort_weight', default: 50
        },
        {
          label: '状态', value: 1, type: 'radio', field: 'status', default: 1,
          options: [
            {value: 1, label: '使用'},
            {value: 2, label: '禁用'},
          ]
        }
      ]
    })


    const show = (data): void => {
      dialog.value.show()
      if (data === undefined) data = {...state.form}
      for (let i in state.form) state.form[i] = data[i] || ''
      state.dynamicForm = JSON.parse(JSON.stringify(state.dynamicBase))
      state.dynamicForm.forEach((item: any) => {
        item.value = item?.default || ''
        if (data[item.field] !== undefined) item.value = data[item.field]
      })
    }

    const onFileSelected = (data) => {
      const item = state.dynamicForm.find(item => item.field == 'icon')
      item.value = data[0].file_url
    }

    const formSubmit = async () => {
      const form = JSON.parse(JSON.stringify(state.form))
      state.dynamicForm.forEach((item: any) => form[item.field] = item.value)
      console.log(form)
      if (form.cat_path) {
        let catPath = JSON.parse(JSON.stringify(form.cat_path))
        if (catPath.length) form.parent_id = catPath.pop()
        form.cat_path = form.cat_path.join(',')
      }
      const res = await category.update(form)
      dialog.value.close()
      emit('success')
    }

    return {
      ...toRefs(state),
      dialog,
      show,
      onFileSelected,
      formSubmit
    }
  },
})
</script>